<template>
    <div class="cross-scroll-container">
        <div class="cross-scroll-box">
            <div class="cross-scroll-display"></div>
            <img class="cross-scroll-wrapper-prev" src="/img/common/huangzhou.png">
            <img class="cross-scroll-wrapper-next" src="/img/common/huangzhou.png">
        </div>
    </div>
</template>
  
<script>
import { render, h } from 'vue';

export default {
    name: "CrossScroll",
    props: ["containerList"],
    data() {
        return {
            containerSize: {
                height: 0,
                width: 0
            },
            contentClass: "cross-scroll-content",
            itemClass: "cross-scroll-item",
            csList: [
                "/img/style/shanshuimo.jpeg",
                "/img/style/shanshuimo.jpeg",
                "/img/style/shanshuimo.jpeg",
            ],
            list: []
        }
    },
    computed: {
    },
    methods: {
        //创建img
        createImg() {
            for (const item of this.csList) {
                const initData = { src: item, style: "width:100%;height:100%;" };
                const instance = h("img", initData);
                this.list.push(instance);
            }
        },
        //初始化容器
        resetElements(list) {
            const display = this.$el.parentElement.querySelector(".cross-scroll-display");
            const len = list.length;
            let liList = [];
            for (let index = 0; index < len; index++) {
                const li = h("li", { "class": this.itemClass }, list[index]);
                liList.push(li);
            }
            const ul = h("ul", { "class": this.contentClass }, liList);
            render(ul, display);
        },
        //获取容器尺寸
        getContainerSize() {
            const container = this.$el.parentElement.querySelector(".cross-scroll-container");
            this.containerSize.height = container.offsetHeight;
            this.containerSize.width = container.offsetWidth;
        },
        //监听窗口尺寸变化
        listenResizeEvent(e) {
            this.getContainerSize();
        },
    },
    created() {
        if (this.$props.containerList) {
            this.list = this.$props.containerList;
        } else {
            this.createImg();
        }
    },
    mounted() {
        this.getContainerSize();
        window.addEventListener("resize", this.listenResizeEvent);
        this.resetElements(this.list);
    },
    beforeUnmount() {
        //注销监听器
        window.removeEventListener("resize", this.listenResizeEvent);
    }
}
</script>
  
<style scoped>
.cross-scroll-container {
    width: 100%;
    height: 100%;
}

.cross-scroll-box {
    width: calc(v-bind("containerSize.height") * 1px * 0.7);
    height: calc(v-bind("containerSize.width") * 1px);
    position: relative;
    left: 45%;
    overflow: hidden;
    ;
    transform-origin: 0 0;
    transform: translateY(calc(v-bind("containerSize.height") * 1px * 0.75)) rotate(-90deg);
    transition: left 3s ease-in-out;
}

.cross-scroll-box:hover {
    left: 0%;
}

.cross-scroll-display {
    width: calc(v-bind("containerSize.height") * 1px * 0.6);
    height: 105px;
    left: calc(v-bind("containerSize.height") * 1px * 0.05);
    background-color: rgb(59, 43, 3);
    position: relative;
    overflow: auto;
    transition: height 3s ease-in-out;
}

.cross-scroll-display::-webkit-scrollbar {
    width: 0;
}

.cross-scroll-box:hover>.cross-scroll-display {
    height: calc(v-bind("containerSize.width") * 1px - 100px);
}

.cross-scroll-wrapper-prev {
    width: calc(v-bind("containerSize.height") * 1px * 0.7);
    height: 100px;
    top: -10px;
    position: absolute;
}

.cross-scroll-wrapper-next {
    width: calc(v-bind("containerSize.height") * 1px * 0.7);
    height: 100px;
    position: relative;
    bottom: 10px;
}
</style>

<style>
.cross-scroll-content {
    width: calc(v-bind("containerSize.height * list.length") * 1px + 300px);
    height: calc(v-bind("containerSize.height") * 1px * 0.6);
    position: absolute;
    margin: 0;
    padding: 0;
    left: 100%;
    transform-origin: 0 0;
    transform: rotate(90deg);
}

.cross-scroll-item {
    height: 90%;
    top: 5%;
    width: calc(v-bind("containerSize.height") * 1px);
    position: relative;
    float: left;
    list-style: none;
    left: 200px;
}
</style>